<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>房贷计算器</title>
    <script>
        function jisuanfangshiChange(v){      
            // alert(v)
            if(v === "2"){
                document.querySelector("#jiusanfangshi1").style.display = "block";
                document.querySelector("#jisuanfangshi2").style.display = "none";
                document.querySelector("d-p2").style.display = "none";
                
            }else{
                document.querySelector("#jiusanfangshi1").style.display = "none";
                document.querySelector("#jisuanfangshi2").style.display = "block";
                document.querySelector("d-p2").style.display = "block";
            }              
        }
    </script>
    
</head>
<body>
    <h1>房贷公积金贷款商贷组合贷款计算器</h1>
    <h2>房贷信息</h2>
    <p>贷款类别：
        <select id="daikuanleixing">
            <option value="1">商贷</option>
            <!-- <option value="2">公积金贷款</option>
            <option value="3">组合贷款</option> -->
        </select>
    </p>
    <p>
        还款方式：
        <select id="huankuanfangshi">
            <option value="1">等额本息</option>
            <!-- <option value="2">等额本金</option> -->
          </select>
    </p>




    <p>
        计算方式：<select id="jisuanfangshi" onchange="jisuanfangshiChange(this.value)">
            <option value="1">根据按揭成数计算</option>
            <option value="2">根据贷款总额计算</option>
        </select>
    </p>
    <p id = "jiusanfangshi1" style="display: none;">
        贷款总额(万元)：<input type="text" id="daikuanzonge" placeholder="请输入贷款总额"> 
    </p>
    <p id="jisuanfangshi2" style="display: block;">
        房屋总价(万元)：<input type="text" id="fangwuzongjia" placeholder="请输入房屋总价"> 
        <br>
        <br>
        按揭成数：<select id="anjiechengshu">
                    <option value="0.9">9成</option>
                    <option value="0.8">8成</option>
                    <option value="0.7" selected>7成</option>
                    <option value="0.6">6成</option>
                    <option value="0.5">5成</option>
                    <option value="0.4">4成</option>
                    <option value="0.3">3成</option>
                    <option value="0.2">2成</option>              
                </select>  
    </p>




    <p>
        按揭年数：<select id="daikuanyears">
        </select>
    </p>
    <script>
        let daikuanyears =  document.querySelector("#daikuanyears")
        for(let i=1;i<=30;i++){
             //创建option对象
             let option = document.createElement("option")
             //设置option的value和text
             option.value = i
             option.text = i + "年("+(i*12)+"期)"
             if(i==20){
                option.selected = true
             }
             //添加到select中
             daikuanyears.appendChild(option)
        }
     </script>
    <p>
        商贷利率(百分比计算（%）)：<input type="text" value="3.35" id="shangdaililv" placeholder="请输入商贷利率">
    </p>
    <P><button onclick="jisuan()">房贷计算</button></P>
    <div id="d-p2" style="display: block;">
        <p>房款总额：<input type="text" id="fkze"></p>
        <p>首付款：<input type="text" id="sfk"></p>
    </div>
    <p>贷款总额：<input type="text"id="dkze"></p>
    <p>还款总额：<input type="text"id="hkze"></p>
    <p>支付利息：<input type="text"id="zflx"></p>
    <p>货款月数：<input type="text"id="dkyueshu"></p>
    <p>月均还款：<input type="text" id="yuejunhuankuan"></p>
    <script>
        function jisuan(){
            let jisuanfnagshi=document.querySelector("#jisuanfangshi").value
            if(jisuanfnagshi==="1"){


            let fangwuzongjia = document.querySelector("#fangwuzongjia").value;
            console.log("获取房屋总价：",fangwuzongjia)
            document.querySelector("#fkze").value= fangwuzongjia
            // 获取按揭成数
            let anjiechengshu = document.querySelector("#anjiechengshu").value;
            let shoufukuan =fangwuzongjia*(1-parseFloat(anjiechengshu))*10000;
            console.log("首付款：",shoufukuan)
            document.querySelector("#sfk").value= shoufukuan.toFixed(0)
            let daikuanzonge = fangwuzongjia*parseFloat(anjiechengshu)*10000;
            console.log("贷款总额：",daikuanzonge)
            document.querySelector("#dkze").value=daikuanzonge
            // 支付利息
            // 每月还款额=货款本金X[月利率X（1+月利率）^还款月数-1]/[（1+月利率）^还款月数-1]
            // 获取月利率 获取商货利率
            let yuelilv= parseFloat(document.querySelector("#shangdaililv").value)/100/12
            // 月利率保留四位小数
            yuelilv = parseFloat(yuelilv.toFixed(4))
            console.log("月利率：",yuelilv)
            // 获取按揭年数
            let daikuanyears=parseInt(document.querySelector("#daikuanyears").value)
            console.log("按揭年数：",daikuanyears)
            let huankuanyueshu = daikuanyears*12
            console.log("还款月数：",huankuanyueshu)
            document.querySelector("#dkyueshu").value=huankuanyueshu




            let shenmi = Math.pow(1+yuelilv,huankuanyueshu);
            console.log("是2.71吗？",shenmi)
            let meiyuehuankuan=daikuanzonge*yuelilv*shenmi/(shenmi-1);
            console.log("每月还款额：",meiyuehuankuan)
            document.querySelector("#yuejunhuankuan").value=meiyuehuankuan.toFixed(0)
            // 还款总额
            console.log("还款总额：",meiyuehuankuan*huankuanyueshu)
            document.querySelector("#hkze").value= (meiyuehuankuan*huankuanyueshu).toFixed(0)
            document.querySelector("#zflx").value= ((meiyuehuankuan*huankuanyueshu)-daikuanzonge).toFixed(0);
        }else if(jisuanfnagshi==="2"){
    
        // 获取房屋总价
        // let fangwuzongjia = document.querySelector("#fangwuzongjia").value
        // console.log("获取房屋总价：",fangwuzongjia)
        // document.querySelector("#fkze").value= fangwuzongjia
        // // 获取按揭成数
        // let anjiechengshu = document.querySelector("#anjiechengshu").value
        // let shoufukuan = fangwuzongjia *(1-parseFloat(anjiechengshu))*10000;
        // console.log("首付款：",shoufukuan)
        // document.querySelector("#sfk").value= shoufukuan.toFixed(0)




        let daikuanzonge = document.querySelector("#daikuanzonge").value*10000;
        console.log("货款总额：",daikuanzonge)
        document.querySelector("#dkze").value=daikuanzonge
        // 支付利息
        // 每月还款额=货款本金X[月利率X（1+月利率）^还款月数-1]/[（1+月利率）^还款月数-1]
        // 获取月利率 获取商货利率
        let yuelilv = parseFloat(document.querySelector("#shangdaililv").value) / 100 / 12
        // 月利率保留四位小数
        yuelilv = parseFloat(yuelilv.toFixed(4))
        console.log("月利率：", yuelilv)
        // 获取按揭年数
        let daikuanyears = parseInt(document.querySelector("#daikuanyears").value)
        console.log("按揭年数：",daikuanyears)
        let huankuanyueshu = daikuanyears*12
        console.log ("还款月数：",huankuanyueshu)
        document.querySelector("#dkyueshu").value=huankuanyueshu
        // 每月还款额=货款本金X[月利率X（1+月利率）^还款月数-1]/[（1+月利率）^还款月数-1]
        // 2的平方
        let shenmi = Math.pow(1+yuelilv,huankuanyueshu);
        console.log("是2.71吗？",shenmi)
        let meiyuehuankuan = daikuanzonge * yuelilv * shenmi / (shenmi - 1);
        console.log("每月还款额：", meiyuehuankuan)
        document.querySelector("#yuejunhuankuan").value=meiyuehuankuan.toFixed(0)
        // 还款总额
        console.log("还款总额：", meiyuehuankuan * huankuanyueshu)
        document.querySelector("#hkze").value= (meiyuehuankuan * huankuanyueshu).toFixed(0)
        // 支付利息
       document.querySelector("zflx").value= ((meiyuehuankuan * huankuanyueshu) - daikuanzonge).toFixed(0);
       }
    }
   </script>
</body>
</html>